<template>
  <div>
    <div>
      <div class="main">
        <img src="@/assets/login_img.png" alt="" style="width: 50%;height: 80%;margin-top: 20px;margin-left: 20px;">
        <div class="form">
          <el-form :model="formData" :size="'default'" ref="ruleFormRef" :rules="rules">
            <div id="title">
              <span>Anan&nbsp;Onlyoffice</span>
            </div>
            <el-form-item style="margin-top: 50px" prop="userName">
              <el-input v-model="formData.userName" :prefix-icon="Message" placeholder="请输入用户名"/>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="formData.password" :prefix-icon="Lock" placeholder="请输入密码" show-password/>
            </el-form-item>
            <el-form-item prop="checkCode">
              <el-input class="checkCode" :prefix-icon="Check" v-model="formData.checkCode" placeholder="请输入验证码"/>
              <span id="checkCodeLifespan">{{ checkCodeLifespan }}</span>
              <img class="check-code" :src="api.checkCode" @click="getCheckCode" alt="获取图片失败">
            </el-form-item>
            <el-form-item>
              <div class="">
                <el-checkbox v-model="rememberMe">记住我</el-checkbox>
              </div>
              <div class="no-account">
              <span>已有账号&nbsp;<a href="javascript:" style="color: #2900ff;font-style:normal;"
                                 @click="router.push('/login')">登录</a></span>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button  style="margin-left: auto;margin-right: auto" type="primary" class="loginBtn" @click="register">注册</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div style="text-align: center"><a class="a" href="https://beian.miit.gov.cn" target="_blank">蜀ICP备2022026748号-2</a></div>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, getCurrentInstance, onMounted} from "vue";
import {useRouter, useRoute} from "vue-router";
import {Message, Lock, Check} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const proxy = getCurrentInstance().appContext.config.globalProperties;
const router = useRouter();  // 跳转url
const route = useRoute();  // 获取url参数
const regs = {
  userName: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/,
  number: /^([0]|[1-9][0-9]*)$/,
  password: /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*_]{8,}$/,
  shareCode: /^[A-Za-z0-9]+$/
}

const vcode = (rule, value, callback) => {  // 验证码表单验证规则
  if (value.length < 5) {
    callback(new Error('请输入5位验证码'))
  }
}
const ruleFormRef = ref()  // 表单规则参考
const rules = {  // 表单验证规则
  password: [{required: true, message: "请输入密码", trigger: "blur"}],
  checkCode: [{required: true, message: "请输入验证码", trigger: "blur"}, {validator: vcode}],
}

const formCookie = proxy.$cookie.get("loginInfo")  // 用户登录信息cookie
const formData = reactive({  // 表单数据对象
  userName: formCookie ? formCookie.userName : '', //userName为空，用当前进行验证'',
  password: formCookie ? formCookie.password : '',
  checkCode: ''
})

const checkCodeLifespan = ref(60)  // 验证码有效时间
const api = reactive({
  checkCode: proxy.$url + '/checkCode'
})
const rememberMe = ref(false)  // 记住我 是否勾选记住密码


setInterval(() => {  // 时间间隔触发事件
  if (checkCodeLifespan.value > 0) {
    checkCodeLifespan.value -= 1
  }
}, 1000)   // 每一秒执行一次


function register() {

  if (formData.userName.length < 1 || formData.password.length < 0 || formData.checkCode.length < 5) {
    ElMessage({
      type: "error",
      message: "表单验证不通过,请重新填写表单",
      duration: 2000
    })
  } else {
    if (rememberMe.value) {
      proxy.$cookie.set("loginInfo", {userName: formData.userName, password: formData.password}, "7d")
    }
    proxy.$http.post(
        proxy.$url + '/register?checkCode=' + formData.checkCode.toLowerCase(),
        formData,
        {
          headers: {
            "token": proxy.$cookie.get("token")
          }
        }
    ).then(response => {
      if (response.data.code === 200) {
        ElMessage({
          type: "info",
          message: response.data.msg,
          duration: 2000
        })
        router.push('/login')
      } else {
        ElMessage({
          type: "warning",
          message: response.data.msg,
          duration: 2000
        })
        getCheckCode()
        formData.checkCode = ''
      }
    })
  }
}

function qqLogin() {
  proxy.$http.get(proxy.$url + '/qqLogin/url').then(response => {
    if (response.data.code === 200) {
      document.location.href = response.data.msg;
    } else {
      ElMessage({
        type: "warning",
        message: response.data.msg,
        duration: 2000
      })
    }
  })
}

function getCheckCode() {
  checkCodeLifespan.value = 60
  api.checkCode = proxy.$url + '/checkCode?time=' + new Date().getTime();
}


</script>

<style scoped>
.form {
  background: rgba(255, 255, 255, 0.5);
  width: 400px;
  height: 400px;
  padding: 30px;
  border-radius:50px;
  position: absolute;
  right: 100px;
  top: 100px;
}

.main {
  height: 800px;
  background: linear-gradient(180deg, #3cadeb, #9c88ff);
  display: flex;
  /*justify-content: center;*/
  /*align-items: center;*/
}

#title span {
  font-weight: 500;
  font-size: 30px;
  margin-left: 90px;
}

.checkCode {
  width: 230px;
  margin-right: 5px;
}

.a {
  /*margin-left: 45%;*/
  color: #000000;
  text-decoration: none;
}
.loginBtn {
  width: 120px;
  font-size: 20px;
  margin-left: 140px;

}
.no-account {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.no-account a {
  text-decoration: none;
}

.login-btn-qq img {
  cursor: pointer;
  margin-left: 10px;
  width: 20px;
}

#checkCodeLifespan {
  position: absolute;
  left: 210px;

}

.check-code {
  margin-left: 5px;
  cursor: pointer;
}


#title2 span {
  font-weight: 500;
  font-size: 30px;
  margin-left: 100px;
}

.no-account2 a {
  text-decoration: none;
}


.login-btn-qq2 img {
  cursor: pointer;
  margin-left: 10px;
  width: 20px;
}

.el-input {
  height: 40px;
}

.el-button {
  width: 120px;
  font-size: 20px;
  margin-left: 150px;
}

</style>
